class FangDaJing {
    constructor(newSamallBox, newBigBox, newMask) {
            this.smallBox = newSamallBox;
            this.bigBox = newBigBox;
            this.mask = newMask;
        }
        //鼠标划上显示
    onmouseover() {
            let that = this;
            this.smallBox.onmouseover = function() {
                that.bigBox.style.display = "block";
                that.mask.style.display = "block";

            }
        }
        //鼠标走了不显示
    onmouseout() {
        let that = this;
        this.smallBox.onmouseout = function() {
            that.bigBox.style.display = "none";
            that.mask.style.display = "none";
        }
    }
    onmousemove() {
        let that = this;
        this.smallBox.onmousemove = function(evt) {
            let e = evt || event;
            //mask跟随鼠标移动的那个点
            let left = e.pageX - oMiddle.offsetLeft - that.mask.offsetWidth / 2;
            let top = e.pageY - oMiddle.offsetTop - that.mask.offsetHeight / 2;

            //边界
            if (left < 0) {
                left = 0
            }
            if (top < 0) {
                top = 0
            }
            let maxLeft = that.smallBox.offsetWidth - that.mask.offsetWidth;
            let maxTop = that.smallBox.offsetHeight - that.mask.offsetHeight;
            if (left > maxLeft) {
                left = maxLeft
            }
            if (top > maxTop) {
                top = maxTop
            }
            //mask的移动
            that.mask.style.left = left + "px";
            that.mask.style.top = top + "px";
            //比例尺：   小图片：大图片=mask小窗口：big大窗口
            let x = that.bigBox.offsetWidth * left / that.mask.offsetWidth;
            let y = that.bigBox.offsetHeight * top / that.mask.offsetHeight;
            //背景图片的定位
            that.bigBox.style.backgroundPositionX = -x + "px";
            that.bigBox.style.backgroundPositionY = -y + "px";

        }
    }
}
